<template>
  <div>
    <div>
      <div style="font-size: 18px; margin-top: 5%; margin-bottom: 5%">
        请拍摄或上传图像
      </div>
      <div class="camera_outer" style="margin-top: 5%;">
        <div
          style="
            position: relative;
            margin-left: 0%;
            margin-right: 0%;
            width: 300px;
            height: 300px;
            border: 2px solid;
            border-color: #d3d3d3;
            border-radius: 4px;
            box-shadow: inset 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          "
        ></div>
        <input
          type="file"
          ref="fileInput"
          accept="image/*"
          @change="getFile"
          style="display: none"
        />
        <div v-if="imgSrc" class="img_bg_camera">
          <img :src="imgSrc" alt="" class="tx_img" />
        </div>
      </div>
    </div>
    <div style="position: relative; marign-top: 10%; left: 0; right: 0">
      <el-button type="info" style="margin-right: 10%" @click="last()"
        >上一步</el-button
      >
      <div class="myButton" style="display: inline-block">
        <el-button
          style="margin-top: 11%"
          type="info"
          circle
          @click="$refs.fileInput.click()"
          :icon="buttonIcon"
        ></el-button>
      </div>
      <el-button
        type="info"
        style="margin-left: 10%"
        @click="next()"
        :disabled="img === null"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "myImage",
  data() {
    return {
      videoWidth: 300,
      videoHeight: 300,
      imgSrc: "",
      number: null,
      buttonIcon: "el-icon-picture-outline",
      img: null,
    };
  },
  methods: {
    start() {
      if (this.number === null) {
        this.getCompetence();
        this.scan();
      } else {
        this.number = null;
        this.imgSrc = null;
        this.buttonIcon = "el-icon-full-screen";
        this.scan();
      }
    },
    getFile(event) {
      var _this = this;
      var file = event.target.files[0];
      let fileName = file.name;
      let pattern = new RegExp("^.*?.(jpeg|jpg)$", "gi");
      //let pattern = /^.*?\.(jpeg|jpg|png)$/;

      if (pattern.test(fileName) === false) {
        this.$message({
          showClose: true,
          message: "请上传jpeg/jpg格式的图像",
          type: "error",
        });
        return;
      }

      if (file.size > 5242880) {
        this.$message({
          showClose: true,
          message: "请上传小于5MB的图像",
          type: "error",
        });
        return;
      }

      var fileReader = new FileReader();
      fileReader.onload = function () {
        _this.img = file;
        _this.imgSrc = fileReader.result;
      };

      fileReader.readAsDataURL(file);
    },
    last() {
      this.$emit("lastStep");
    },
    next() {
      var _this = this;
      this.$store.dispatch("setImg", _this.img);
      this.$store.dispatch("setImgUrl", _this.imgSrc);
      this.$emit("nextStep");
    },
  },
};
</script>

<style lang="scss" scoped>
.camera_outer {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  //background-size: 100%;
  video,
  canvas,
  .tx_img {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
  }
  .btn_camera {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    line-height: 50px;
    text-align: center;
    color: #ffffff;
  }
  .bg_r_img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
  }
  .img_bg_camera {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    img {
      width: 300px;
      height: 300px;
      max-width: 300px;
      max-height: 300px;
      object-fit: fill;
    }
  }
}
</style>